<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <h1>Word Frequency Chart</h1>
    <div id="chart"></div>

    <script>
        // 获取数据并初始化图表
        function fetchData() {
            axios.get('http://localhost:8080/data')
                .then(response => {
                    console.log('Data fetched:', response.data); // 调试信息
                    initChart(response.data);
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                });
        }

        function initChart(data) {
            const words = data.map(item => item.word);
            const frequencies = data.map(item => item.frequency);

            const chart = echarts.init(document.getElementById('chart'));

            const option = {
                title: {
                    text: 'Word Frequency'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: words
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: 'Frequency',
                    type: 'bar',
                    data: frequencies
                }]
            };

            chart.setOption(option);
        }

        // 页面加载时调用 fetchData
        window.onload = fetchData;
    </script>
</body>
</html>
